<template>
  <Layout desc="使用auto-fit实现响应式适配">
    <div class="mt-20 w-300">
      <div class="container">
        <div class="card" v-for="i in 24">{{ i }}</div>
      </div>
    </div>
  </Layout>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  justify-content: center;
}

.card {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  display: grid;
  place-items: center;
  aspect-ratio: 3/4;
}
</style>
